<template>
  <view>
    <u-navbar title="健康档案" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#222" back-icon-color="#222"></u-navbar>
    <view class="" style="margin: 20rpx 28rpx; background: #fff; border-radius: 20rpx; display: flex; align-items: center; justify-content: space-between; padding: 51rpx 34rpx">
      <view class="">
        <view class="" style="display: flex; align-items: center">
          <text style="font-size: 32rpx; font-weight: bold">{{ data.patient_name }}</text>
          <text style="font-size: 28rpx; padding-left: 24rpx">{{ data.patient_gender_text }}</text>
          <text style="font-size: 28rpx; padding-left: 26rpx; padding-right: 22rpx">{{ data.patient_age }}岁</text>
          <view class="bs">默认</view>
        </view>
        <view class="" style="font-size: 28rpx; padding-top: 20rpx">患者编号：{{ data.patient_id }}</view>
      </view>
      <view class="btn" @tap="huan">切换就诊人</view>
    </view>
    <!-- 处方 -->
    <view class="" style="margin: 0 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 46rpx">
      <view class="" style="display: flex; align-items: center; justify-content: space-around; padding-top: 34rpx">
        <view class="" style="text-align: center" v-for="(i, k) in arr" :key="k" @tap="align(k)">
          <image :src="'https://wenzhen.jiangkukeji360.com/static/slow/m' + k + '.png'" mode="" style="width: 102rpx; height: 102rpx"></image>
          <view class="" style="font-size: 28rpx">
            {{ i.name }}
          </view>
        </view>
      </view>
      <!-- 自主病情检测 -->
      <view
        class=""
        style="margin: 20rpx 38rpx; background: #f8f8f8; border-radius: 12rpx; height: 90rpx; display: flex; align-items: center; justify-content: space-between"
        @tap="myjian"
      >
        <view class="" style="font-size: 26rpx; padding-left: 36rpx">自主病情监测</view>
        <view class="" style="padding-right: 25rpx">
          <u-icon name="arrow-right" color="#999999" size="26"></u-icon>
        </view>
      </view>
      <!-- 完善个人档案 -->
      <view
        class=""
        style="margin: 20rpx 38rpx; background: #f8f8f8; border-radius: 12rpx; height: 90rpx; display: flex; align-items: center; justify-content: space-between"
        @tap="wan"
      >
        <view class="" style="font-size: 26rpx; padding-left: 36rpx">完善个人档案</view>
        <view class="" style="padding-right: 25rpx">
          <u-icon name="arrow-right" color="#999999" size="26"></u-icon>
        </view>
      </view>
    </view>
    <!-- 健康数据 -->
    <view class="" style="background: #f8f8f8; margin: 30rpx">
      <u-tabs :list="list" active-color="#1A9EFF" inactive-color="#222222" :is-scroll="false" :current="current" @change="change" bg-color="#F8F8F8"></u-tabs>
    </view>
    <!-- 健康数据 -->
    <view class="" style="display: flex; flex-wrap: wrap; margin: 0 28rpx; justify-content: space-between" v-if="current == 0">
      <view
        class=""
        style="background: #ffffff; border-radius: 20rpx; padding: 12rpx 29rpx 26rpx 14rpx; width: 48%; margin-top: 20rpx"
        v-for="(i, k) in heart"
        :key="k"
        @tap="joop(k)"
      >
        <view class="" style="display: flex; align-items: center; justify-content: space-between">
          <view class="" style="font-size: 28rpx; display: flex; align-items: center">
            <image :src="img_url + i.type.image" mode="" style="width: 74rpx; height: 74rpx; margin-right: 15rpx"></image>
            <text>{{ i.type.title }}</text>
          </view>
          <view class="">
            <u-icon name="arrow-right" color="#999999" size="26"></u-icon>
          </view>
        </view>
        <view class="" style="font-size: 24rpx; color: #999999" v-if="i.result == ''">尚未记录</view>
        <view class="">
          <!-- 尚未记录 -->
          <view class="" style="font-size: 24rpx; color: #999999">
            {{ i.result.measure_time_text ? i.result.measure_time_text : '' }}
          </view>
          <!-- 体重 -->
          <view class="" style="font-size: 32rpx; padding-top: 15rpx">
            {{ i.result.content ? i.result.content : '' }}
          </view>
        </view>
      </view>
    </view>
    <!-- 管理方案 -->
    <view class="" style="margin: 0 28rpx; display: flex; align-items: center; justify-content: space-between" v-if="current == 1">
      <view
        class=""
        style="background: #ffffff; border-radius: 20rpx; padding: 12rpx 29rpx 26rpx 14rpx; width: 47%; margin-top: 20rpx; height: 190rpx"
        @tap="sports(i)"
        v-for="(i, k) in user"
        :key="k"
      >
        <view class="" style="display: flex; align-items: center; justify-content: space-between">
          <view class="" style="font-size: 28rpx; display: flex; align-items: center">
            <image :src="img_url + i.image" mode="" style="width: 74rpx; height: 74rpx; margin-right: 15rpx"></image>
            <text>{{ i.title }}</text>
          </view>
          <view class="">
            <u-icon name="arrow-right" color="#999999" size="26"></u-icon>
          </view>
        </view>
      </view>
      <!-- <view class=""
				style="background: #FFFFFF;border-radius: 20rpx;padding: 12rpx 29rpx 26rpx 14rpx;width:40%;margin-top: 20rpx;height: 190rpx;" @tap="bite">
				<view class="" style="display: flex;align-items: center;justify-content: space-between;">
					<view class="" style="font-size: 28rpx;display: flex;align-items: center;">
						
							<image src="../../static/slow/check.png" mode="" style="width: 74rpx;height: 74rpx;padding-right: 15rpx;"></image>
						<text>饮食</text>
					</view>
					<view class="">
						<u-icon name="arrow-right" color="#999999" size="26"></u-icon>
					</view>
				</view>
			</view> -->
    </view>
    <!-- 报告中心 -->
    <view class="" v-if="current == 2">
      <view class="" style="text-align: center; margin: 28rpx; background: #fff; border-radius: 12rpx; padding-bottom: 100rpx" v-if="paperlist == ''">
        <image src="https://wenzhen.jiangkukeji360.com/static/slow/low.png" mode="" style="width: 260rpx; height: 260rpx"></image>
        <view class="btns" @tap="paper">上传检查报告</view>
      </view>
      <view class="" v-else>
        <view class="" style="margin: 20rpx 28rpx; background: #fff; border-radius: 12rpx" v-for="(i, k) in paperlist" :key="k">
          <view class="" style="padding: 33rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #f8f8f8">
            <view class="" style="font-size: 26rpx">
              {{ i.report_name }}
            </view>
            <view class="" style="font-size: 24rpx; color: #666666">
              {{ i.create_time_text }}
            </view>
          </view>
          <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 21rpx 33rpx">
            <view class="">
              <view class="">
                <text style="font-size: 30rpx">{{ i.patient_name }}</text>
                <text style="font-size: 24rpx; color: #999999; padding-left: 27rpx">{{ i.report_type == 2 ? '检查报告' : '检验报告' }}</text>
              </view>
              <view class="" style="font-size: 26rpx; padding-top: 25rpx">
                {{ i.report_unit }}
              </view>
            </view>
            <image :src="img_url + i.report_images[0]" mode="" style="width: 122rpx; height: 122rpx; border-radius: 20rpx"></image>
          </view>
        </view>
        <view class="btns" @tap="paper">上传检查报告</view>
      </view>
    </view>
    <!-- 就诊病例 -->
    <view class="" v-if="current == 3">
      <view class="" style="text-align: center; margin: 28rpx; background: #fff; border-radius: 20rpx" v-if="type">
        <image src="https://wenzhen.jiangkukeji360.com/static/slow/low.png" mode="" style="width: 260rpx; height: 260rpx; padding-top: 30rpx"></image>
        <view class="" style="font-size: 26rpx; color: #666666">暂无内容</view>
        <view class="btns">新增病例</view>
      </view>
      <view class="" v-else>
        <view class="" style="display: flex; padding: 0 28rpx; flex-wrap: wrap; justify-content: space-between">
          <view class="" style="width: 48%; background: #fff; border-radius: 12rpx; margin-top: 10rpx" v-for="(i, k) in binglist" :key="k" @tap="myuser(i)">
            <view class="" style="padding: 32rpx; border-bottom: 1rpx solid #f8f8f8">我的病例</view>
            <view class="" style="padding-top: 32rpx; padding-left: 32rpx">
              <text style="font-size: 30rpx">{{ i.patient_name }}</text>
            </view>
            <view class="">
              <text style="font-size: 24rpx; color: #999999; padding-left: 29rpx">{{ i.department_name }}</text>
            </view>
            <view class="" style="font-size: 26rpx; padding-left: 29rpx; padding-top: 25rpx; padding-bottom: 50rpx">
              {{ i.submit_time_text }}
              <!-- {{i.submit_time_text.split(' ')[0]}} -->
              <!-- 2022-06-18 -->
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: null,
      background: {
        background: '#FFFFFF'
      },
      arr: [
        {
          name: '处方续药'
        },
        {
          name: '慢病宣教'
        },
        {
          name: '健康测评'
        },
        {
          name: '医生随访'
        }
      ],
      list: [
        {
          name: '健康数据'
        },
        {
          name: '管理方案'
        },
        {
          name: '报告中心'
        },
        {
          name: '就诊病例'
        }
      ],
      current: 0,
      heart: [],
      data: {},
      user: [],
      page: 1,
      page1: 1,
      paperlist: [],
      binglist: []
    };
  },
  methods: {
    myuser(e) {
      uni.navigateTo({
        url: '/home/illness/illness?id=' + JSON.stringify(e)
      });
    },
    myjian() {
      uni.navigateTo({
        url: '/home/disease/disease'
      });
    },
    getpaper() {
      this.api({
        url: '/api/healthy/getReportList',
        method: 'post',
        data: {
          page: this.page,
          patient_id: this.data.patient_id
        }
      }).then((res) => {
        this.paperlist = this.paperlist.concat(res.data);
        this.page++;
      });
    },
    paper() {
      uni.navigateTo({
        url: '/home/paper/paper?name=' + this.data.patient_name
      });
    },
    bite() {
      uni.navigateTo({
        url: '/pages/slow/bite'
      });
    },
    sports(e) {
      uni.navigateTo({
        url: '/home/sports/sports?type_id=' + JSON.stringify(e) + '&patient_id=' + this.data.patient_id
      });
    },
    change(index) {
      this.current = index;
      if (this.current == 2) {
        this.getpaper();
      } else if (this.current == 3) {
        this.instance();
      }
    },
    instance() {
      this.api({
        url: '/api/user/getUserCase',
        method: 'post',
        data: {
          page: this.page1,
          patient_id: this.data.patient_id
        }
      }).then((res) => {
        this.binglist = this.binglist.concat(res.data.data);
        this.page1++;
      });
    },
    align(e) {
      if (e == 0) {
        uni.reLaunch({
          url: '/pages/index/index'
        });
      } else if (e == 1) {
        uni.navigateTo({
          url: '/home/proclaim/proclaim'
        });
      } else if (e == 2) {
        uni.navigateTo({
          url: '/home/test/test'
        });
      } else {
        uni.navigateTo({
          url: '/home/follow/follow?id=' + this.data.patient_id
        });
      }
    },
    wan() {
      uni.navigateTo({
        url: '/home/perfect/perfect'
      });
    },
    joop(k) {
      if (k == 0) {
        uni.navigateTo({
          url: '/home/weight/weight?id=' + this.heart[k].type.id + '&banner=' + this.heart[k].type.banner
        });
      } else if (k == 1) {
        uni.navigateTo({
          url: '/home/heartrate/heartrate?id=' + this.heart[k].type.id + '&banner=' + this.heart[k].type.banner
        });
      } else if (k == 2) {
        uni.navigateTo({
          url: '/home/blood/blood?id=' + this.heart[k].type.id + '&banner=' + this.heart[k].type.banner
        });
      } else if (k == 3) {
        uni.navigateTo({
          url: '/home/sugar/sugar?id=' + this.heart[k].type.id + '&banner=' + this.heart[k].type.banner
        });
      } else if (k == 4) {
        uni.navigateTo({
          url: '/home/xzgl/xzgl?id=' + this.heart[k].type.id + '&banner=' + this.heart[k].type.banner
        });
      } else if (k == 5) {
        uni.navigateTo({
          url: '/home/num/num?id=' + this.heart[k].type.id
        });
      } else {
        uni.navigateTo({
          url: '/home/stepnumber/stepnumber?id=' + this.heart[k].type.id
        });
      }
    },
    pople() {
      this.api({
        url: '/api/index/getDefault',
        method: 'post'
      }).then((res) => {
        this.data = res.data;
      });
      this.api({
        url: '/api/healthy/planType',
        method: 'post'
      }).then((res) => {
        this.user = res.data;
      });
    },
    huan() {
      uni.navigateTo({
        url: '/user/data/data?type=1'
      });
    },
    types() {
      this.api({
        url: '/api/healthy/dataInfo',
        method: 'post'
      }).then((res) => {
        this.heart = res.data;
      });
    }
  },
  onShow() {
    this.pople();
    this.types();
  },
  onLoad() {}
};
</script>

<style>
page {
  background: #f8f8f8;
}

.btns {
  margin: 36rpx 87rpx;
  height: 80rpx;
  background: linear-gradient(180deg, #1a9eff, #0fb8ff);
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  color: #fff;
  font-size: 32rpx;
}

.bs {
  width: 70rpx;
  height: 32rpx;
  background: #d5eeff;
  border-radius: 16rpx;
  text-align: center;
  line-height: 32rpx;
  font-size: 22rpx;
  color: #1a9eff;
}

.btn {
  width: 164rpx;
  height: 60rpx;
  border: 1rpx solid #1a9eff;
  border-radius: 30rpx;
  text-align: center;
  line-height: 60rpx;
  font-size: 26rpx;
  color: #1a9eff;
}
</style>
